import { createApp, watchEffect } from 'vue';

import { registerAccessDirective } from '@vben/access';
import { registerLoadingDirective } from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores';
import '@vben/styles';
import '@vben/styles/antd';

import { useTitle } from '@vueuse/core';

import { $t, setupI18n } from '#/locales';
import { router } from '#/router';

import { initComponentAdapter } from './adapter/component';
import App from './app.vue';
// import { createPinia } from 'pinia';
import { Plus } from '@vben/icons';
// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// const pinia = createPinia();

async function bootstrap(namespace: string) {
  // 初始化组件适配器
  await initComponentAdapter();

  // 设置弹窗的默认配置
  // setDefaultModalProps({
  //   fullscreenButton: false,
  // });
  // 设置抽屉的默认配置
  // setDefaultDrawerProps({
  //   zIndex: 1020,
  // });

  const app = createApp(App);

  // 注册v-loading指令
  registerLoadingDirective(app, {
    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
    spinning: 'spinning',
  });

  // 国际化 i18n 配置
  await setupI18n(app);

  // 配置 pinia-tore
  await initStores(app, { namespace });

  // 安装权限指令
  registerAccessDirective(app);

  // 初始化 tippy
  const { initTippy } = await import('@vben/common-ui/es/tippy');
  initTippy(app);
  //使用 piniaPluginPersistedstate 持久化插件
  // pinia.use(piniaPluginPersistedstate)

  // 配置路由及路由守卫
  app.use(router);
  app.component('Plus', Plus);
  /* app.use(pinia);（存在）
  core-access	{"accessToken":"de834332-fd15-4cf3-b3bf-dcb999a8671e","isLockScreen":false}
  */ 
   /* app.use(pinia);（不存在）
  blueshark-web-play-5.5.6-dev-core-access	{"accessToken":"70f8e583-5728-4b56-ad54-fc07514a4fce","accessCodes":[],"isLockScreen":false}
  */ 
  // app.use(pinia); （持久化也是没问题的） 要使用 piniaPluginPersistedstate 持久化插件

  // 配置@tanstack/vue-query
  const { VueQueryPlugin } = await import('@tanstack/vue-query');
  app.use(VueQueryPlugin);

  // 配置Motion插件
  const { MotionPlugin } = await import('@vben/plugins/motion');
  app.use(MotionPlugin);

  // 动态更新标题
  watchEffect(() => {
    if (preferences.app.dynamicTitle) {
      const routeTitle = router.currentRoute.value.meta?.title;
      const pageTitle =
        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
      useTitle(pageTitle);
    }
  });

  app.mount('#app');
}

export { bootstrap };
